<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fkyuan" uri="http://github.com/fkyuan/tags/fkyuan-functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title></title>
    <%@include file="/WEB-INF/pages/common/basic-styles.jspf" %>
    <link rel="stylesheet" href="${ctx}/static/js/zTree v3.5.24/css/zTreeStyle/zTreeStyle.css">
    <style>
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:200px;overflow-y:scroll;overflow-x:auto;}
    </style>
</head>
<body>
	<div class="page-header">
		<h1>
			用户修改
		</h1>
	</div><!-- /.page-header -->
    <form:form method="post" commandName="user" class="form-horizontal">
        <form:hidden path="id"/>
        <form:hidden path="salt"/>
        <form:hidden path="locked"/>
        <form:hidden path="password"/>
        <input type="hidden" id="oldUsername" name="oldUsername" value="${user.username}">
        
        <div class="form-group">
			<label class="col-sm-3 control-label no-padding-right" for="username"> 用户名 </label>
			<div class="col-sm-9">
				<form:input path="username" placeholder="Username" class="col-xs-10 col-sm-5" />
				<span class="help-inline col-xs-12 col-sm-7">
					<span class="middle"><font color="red">*</font></span>
				</span>
			</div>
		</div>
		<div class="space-4"></div>

		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right" for="organizationName"> 所属组织 </label>
			<form:hidden path="organizationId"/>
			<div class="col-sm-9">
				<input type="text" id="organizationName" name="organizationName" placeholder="Select Organization..." class="col-xs-10 col-sm-5" value="${fkyuan:organizationName(user.organizationId)}" readonly/>
				<span class="help-inline col-xs-12 col-sm-7">
					<span class="middle"><font color="red">*</font><a id="menuBtn" href="javascript:" style="margin-top: 10px;">选择</a></span>
				</span>
			</div>
		</div>
		<div class="space-4"></div>
		
		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right" for="roleIds"> 角色列表 </label>
			<div class="col-sm-4">
				<select id="roleIds" name="roleIds" multiple="multiple" class="form-control">
					<c:forEach items="${roleList}" var="s">
						<option value="${s.id}" ${fn:contains(user.roleIds, s.id) ? 'selected' : ''}>${s.roleName}</option>
					</c:forEach>
				</select>					  
				<span class="help-inline col-xs-12 col-sm-7">
					<font color="red">*</font><span class="middle">(按住shift键多选)</span>
				</span>
			</div>
		</div>
		<div class="space-4"></div>

        <div class="clearfix form-actions">
			<div class="col-md-offset-3 col-md-9">
				<button class="btn btn-info" type="button" onclick="save()"><i class="icon-ok bigger-110"></i>修改</button>
				&nbsp; &nbsp; &nbsp;
				<button class="btn off" type="button"><i class="icon-off bigger-110"></i>关闭</button>
			</div>
		</div>
    </form:form>

    <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="tree" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>
    
	<%@include file="/WEB-INF/pages/common/basic-scripts.jspf" %>   
    <script src="${ctx}/static/js/zTree v3.5.24/js/jquery.ztree.all.min.js"></script>
    <script>
        $(function () {
            var setting = {
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                }
            };

            var zNodes =[
                <c:forEach items="${organizationList}" var="o">
                    <c:if test="${not o.rootNode}">
                        { id:${o.id}, pId:${o.parentId}, name:"${o.name}"},
                    </c:if>
                </c:forEach>
            ];

            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getSelectedNodes(),
                        id = "",
                        name = "";
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                    name += nodes[i].name + ",";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                if (name.length > 0 ) name = name.substring(0, name.length-1);
                $("#organizationId").val(id);
                $("#organizationName").val(name);
                hideMenu();
            }

            function showMenu() {
                var cityObj = $("#organizationName");
                var cityOffset = $("#organizationName").offset();
                $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

                $("body").bind("mousedown", onBodyDown);
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }

            $.fn.zTree.init($("#tree"), setting, zNodes);
            $("#menuBtn").click(showMenu);
            
            
            $(".off").click(function() {
            	location.href = '${ctx}/manage/system/user';
            })
        });
        
        function save() {
        	var username = $("#username").val();
        	if (isEmpty(username)) {
        		defaultAlert("用户名不能为空");
        		return false;
        	}
        	var password = $("#password").val();
        	if (isEmpty(password)) {
        		defaultAlert("密码不能为空");
        		return false;
        	}
        	var organizationId = $("#organizationId").val();
        	if (isEmpty(organizationId)) {
        		defaultAlert("请选择组织机构");
        		return false;
        	}
        	var roleIds = $("#roleIds").val();
        	if (isEmpty(roleIds)) {
        		defaultAlert("请选择角色");
        		return false;
        	}
        	var oldUsername = $("#oldUsername").val();
        	if (username != oldUsername) {
        		$.ajax({
                    type: 'post',
                    url: '${ctx}/manage/system/user/findByUsername',
                    data: {
                        username:username
                    },
                    success: function (data) {                	
                        if (data == "true") {
                        	defaultAlert("用户名已经存在");
                        	$("#username").focus();
                        	return false;
                        } else {
                        	loading();
                        	$("#user").submit();
                        }
                    }
                });
        	} else {
        		loading();
            	$("#user").submit();
        	}
        }
    </script>

</body>
</html>